<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:insert>
	<f:view>

		<!-- Produkt-LISTA. Visas bara om subChoice INTE Ãr 'search'. -->
		<h:panelGrid id="prodListing" rendered="#{navigatorBean.subChoice != 'search'}">
			<h:outputLabel class="rub1" value="Produkter i kategorin #{navigatorBean.subChoice}:"/><br/><br/><br/>
			<h:dataTable value="${prodBean.getProds(navigatorBean.getSubChoice())}" var="product">
				<h:column>
					<f:facet name="header"><h:outputText value="" /></f:facet>
       		 		<h:graphicImage value="#{product.img}" width="130" />
    			</h:column>
    			<h:column>
    				<f:facet name="header"><h:outputText value="Vara:" /></f:facet>
       		 		<h:link value="#{product.name}" outcome="product"/>
    			</h:column>
    			<h:column>
    				<f:facet name="header"><h:outputText value="Beskrivning:" /></f:facet>
       		 		<h:link value="#{product.description}" outcome="product"/>
    			</h:column>
    			<h:column>
    				<f:facet name="header"><h:outputText value="Pris:" /></f:facet>
       		 		<h:link value="#{product.price}kr/st" outcome="product"/>
    			</h:column>
    			<h:column>
    				<f:facet name="header"><h:outputText value="" /></f:facet>
    				<h:form>
    					<h:commandButton action="${shoppingBean.setNewItem(product)}" value="Köp">
    						<f:ajax render=""/>
    					</h:commandButton>
       		 		</h:form>
    			</h:column>
			</h:dataTable>
		</h:panelGrid>
		
		
		
		
		
		<!-- Produkt-SÖKNING. Visas om subChoice ÃR 'search'.-->
		<h:panelGrid id="prodSearch" rendered="#{navigatorBean.subChoice == 'search'}">
			<h:outputLabel class="rub1" value="Sok produkter"/><br/><br/><br/>
			
			
    	  	<!-- Ajax-sökformulär. -->
    	  	<h:panelGroup id="ajaxSearchForm" columns="2">
    	  		<h:form>
					<h:outputLabel value="Sostrang: experiment " />
    	  			<h:inputText value="#{prodBean.searchString}">
    					<f:ajax event="keyup" render="searchResults" listener="#{prodBean.ajaxListener}"  />
					</h:inputText>
    	  		</h:form>
    	  	</h:panelGroup>
    	  	
			<h:panelGroup id="searchResults">	
				<h:dataTable value="${prodBean.getSearchResults()}" var="product">
					<h:column>
						<f:facet name="header"><h:outputText value="" /></f:facet>
  	     		 		<h:graphicImage value="#{product.img}" width="130" />
  	  				</h:column>
  	  				<h:column>
  	  					<f:facet name="header"><h:outputText value="Vara:" /></f:facet>
  	     		 		<h:link value="#{product.name}" outcome="product"/>
  	  				</h:column>
   	 				<h:column>
   	 					<f:facet name="header"><h:outputText value="Beskrivning:" /></f:facet>
   	    		 		<h:link value="#{product.description}" outcome="product"/>
   	 				</h:column>
    				<h:column>
    					<f:facet name="header"><h:outputText value="Pris:" /></f:facet>
       		 			<h:link value="#{product.price}kr/st" outcome="product"/>
    				</h:column>
    				
				</h:dataTable>
			</h:panelGroup>
			
		</h:panelGrid>
		
	</f:view>
</ui:insert>

</ui:composition>